import React from 'react'
import { Table, Space, Button,Popconfirm } from 'antd';

// 表格待渲染的数据源
// 班级、学号、姓名、测量方式、体温、所在地、是否外出、是否有不良症状、填报时间
// const data = [
//   {
//     id:1,
//     clazz:'三年A班',
//     stuNo:'20201121',
//     name:'张三',
//     type:1,  // 1、额温  2、耳温
//     temperature:36.2,
//     isOut:0,  // 0、否   1、是
//     symptom: '无',
//     address:'成都青羊区',
//     createTime:'2021-01-26 11:48:32'
//   }
// ];

// 自定义表格 函数组件
export default function CustomTable(props) {
  
  // console.log(props)
  const {dataSource,total,pageSize,onChange,onUpdateClick,onDeleteClick} = props

  // 表格中的列的定义
  const columns = [
    {
      title:'序号', // 列标题
      dataIndex: 'id',  // 数据项(对象)中的属性名
      key: 'id' // 标识，有 dataIndex 的不同设置，可省略
    },
    {
      title:'班级',
      dataIndex:'clazz'
    },
    {
      title:'学号',
      dataIndex:'stuNo'
    },
    {
      title:'姓名',
      dataIndex:'name'
    },
    {
      title: '测量方式',
      dataIndex: 'type',
      render:(text,record,index) => {
        // render 是需要渲染复杂内容时 使用到的渲染函数
        // 参数：
          // text 是渲染数据项中当前列的值
          // record 是当前渲染的数据项（对象）
          // index 是航索引（数据项的索引）
        return (
          <span>
            {text === 1 ? '额温' : '耳温' }
          </span>
        )
      }
    },
    {
      title:'体温',
      dataIndex:'temperature'
    },
    {
      title:'所在地',
      dataIndex:'address'
    },
    {
      title:'是否外出',
      dataIndex:'isOut',
      render: text => {
        return (
          <span>
            {text === 0 ? '否': '是'}
          </span>
        )
      }
    },
    {
      title:'症状',
      dataIndex:'symptom'
    },
    {
      title:'记录时间',
      dataIndex:'createTime'
    },
    {
      title: 'Action',
      key: 'action',
      render: (text, record) => (
        // record 是当前渲染的数据项（对象）
        // 即点击修改后 这一行的 数据对象
        <Space size="middle">
          <Button 
            type="primary"
            onClick={() => {
              // record 是当前渲染的数据项（对象）
              onUpdateClick(record)
              // console.log(record)
            }}
          >
            修改
          </Button>
          <Popconfirm
            title="你确定要删除这个数据吗?"
            // record 是当前渲染的数据项（对象）
            onConfirm={()=>onDeleteClick(record.id)}
            okText="是"
            cancelText="否"
          >
            <Button type="danger">删除</Button>
          </Popconfirm>
          
        </Space>
      ),
    },
  ];

  return (
    <Table
      bordered
      rowKey="id"
      columns={columns}
      dataSource={dataSource}
      pagination={{
        total,
        pageSize,
        onChange,
        pageSizeOptions: [5, 10, 20, 50, 100, 1000],
        showTotal: (total, range) => `总记录数：${total}，当前第${range[0]}-${range[1]}条`
        
      }}
    />
  )
}
